<!--
 * @Author: ChunLai
 * @Date: 2022-02-17 11:53:26
 * @LastEditTime: 2025-04-15 11:40:01
 * @Description: 保险计划
 * @FilePath: \02.bldinsure\src\views\index\components\PlanDutyDesc.vue
-->
<template>
  <div class="mainbox bg-fff">
    <div class="sy-mode-head">保障计划</div>
    <div class="scroll-container">
      <ul class="condition-slide">
        <li
          :class="['condition', index == activeId ? 'active' : '']"
          v-for="(item, index) in insuPlan"
          :key="index"
          @click="activeId = index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <ol class="item-ol">
      <li
        class="item-li"
        v-for="(item, index) in insuPlan[activeId].infos"
        :key="index"
      >
        <span class="item-li-l">
          {{ item.title }}
        </span>
        <span class="item-li-r" v-if="item.value">
          {{ item.value }}
        </span>
      </li>
      <li class="item-li-more ft12" @click="showPreModule = true">查看详情</li>
    </ol>
    <div class="taps_foot" v-if="insuPlan[activeId].prem">
      ￥ <strong>{{ insuPlan[activeId].prem }}</strong> 起
    </div>

    <PopCommon
      popTitle="保障详情"
      :popShow="showPreModule"
      @callback="showPreModule = false"
    >
      <template v-slot:content>
        <div>
          <div class="scroll-container">
            <ul class="condition-slide pdl14">
              <li
                :class="['condition2', index == activeId ? 'active' : '']"
                v-for="(item, index) in insuPlan"
                :key="index"
                @click="activeId = index"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <ol class="item-ol pd14_lr">
            <li
              class="item-li2"
              v-for="(item, index) in insuPlan[activeId].infos"
              :key="index"
            >
              <div class="item-li-t">
                <span class="item-li-l">
                  {{ item.title }}
                </span>
                <span class="item-li-r2" v-if="item.value">
                  {{ item.value }}
                </span>
              </div>
              <div class="item-li-b" v-html="item.description"></div>
            </li>
          </ol>
        </div>
      </template>
    </PopCommon>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "PlanDutyDesc",
  components: {},
  computed: {
    ...mapGetters({
      insuPlan: "page/insurePlansList",
    }),
  },
  data() {
    return {
      activeId: 0,
      activeName: "0",
      showPreModule: false,
    };
  },
};
</script>

<style lang="less" scoped>
.md-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  border-bottom: 1px solid #ddd;
}

.scroll-container {
  overflow: hidden;

  .condition-slide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 0;
    white-space: nowrap;

    &.pdl14 {
      padding-left: 14px;
    }

    .condition {
      display: inline-block;
      box-sizing: border-box;
      min-width: 60px;
      padding: 10px 10px;
      margin-right: 10px;
      font-size: 12px;
      color: #333333;
      line-height: 1;
      text-align: center;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      overflow: hidden;

      &.active {
        color: #ffffff;
        background-color: #00a8f7;
      }
    }

    .condition2 {
      display: inline-block;
      box-sizing: border-box;
      min-width: 60px;
      padding: 8px 6px;
      margin-right: 6px;
      font-size: 12px;
      color: #666666;
      line-height: 1;
      text-align: center;
      border-radius: 2px;
      background-color: #f5f5f5;

      &.active {
        color: #00a8f7;
        background-color: #f5f5f5;
      }
    }
  }
}

.item-ol {
  display: flex;
  flex-direction: column;

  .item-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-size: 12px;

    &:not(:last-child) {
      border-bottom: 1px dashed #e1e1e1;
    }

    .item-li-l {
      line-height: 1.3;
      color: #666666;
    }

    .item-li-r {
      max-width: 36%;
      line-height: 1.3;
      color: #333333;
    }
  }

  .item-li2 {
    padding-bottom: 10px;

    &:not(:last-child) {
      border-bottom: 1px dashed #e1e1e1;
    }

    .item-li-t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 8px 0;
      font-size: 12px;

      .item-li-l {
        line-height: 1.3;
        color: #333333;
        font-weight: 600;
      }

      .item-li-r2 {
        max-width: 36%;
        line-height: 1.3;
        color: #ff8c2c;
      }
    }

    .item-li-b {
      color: #666;
      font-size: 12px;
      line-height: 1.5;
    }
  }

  .item-li-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 12px;
    color: #1890ff;
  }
}

.mainbox {
  padding: 0 14px;
}

.taps_foot {
  width: 100%;
  padding: 14px 0;
  background-color: #ffffff;
  color: #ee0a24;
  overflow: hidden;

  strong {
    font-size: 24px;
  }

  text-align: left;
}
</style>
